import { nextTick, Ref, ref } from 'vue';

import { useWindowSizeFn } from './useWindowSizeFn';

export const useListWidthReSize = (min: number, domRef: Ref<HTMLDivElement>) => {
  const itemWidth = ref(0);

  const handleSize = async () => {
    await nextTick();

    const boundingClientRect = domRef.value.getBoundingClientRect();

    console.log('boundingRect', boundingClientRect);

    const itemLeft = 16;
    const totalWidth = boundingClientRect.width - 32;
    const lineNum = Math.floor((totalWidth - min) / (min + itemLeft)) + 1;
    const remainWidth = totalWidth - ((min + itemLeft) * lineNum - itemLeft);
    itemWidth.value = remainWidth / lineNum + min;
  };

  useWindowSizeFn<void>(handleSize, { immediate: true });

  return { handleSize, itemWidth };
};
